<div class="ui masthead vertical segment">
  <div class="ui container">
    <div class="introduction">

      <h1 class="ui header">
        Nag

        <div class="sub header">
          A nag is an important message that persists until dismissed by a user
        </div>
      </h1>

      <div class="ui hidden divider"></div>

      <p>
        For additional documentation on how to configure this module, please refer to the {{#link-to 'modules.index'}}Getting Started{{/link-to}} section and Semantic UI's module specific external documentation links below.
      </p>

      <div class="ui item stackable tabs menu">
        <a class="item" href="http://semantic-ui.com/modules/nag.html" target="_blank">Definition</a>
        {{!-- <a class="item" href="http://semantic-ui.com/modules/nag.html#/examples" target="_blank">Examples</a> --}}
        {{!-- <a class="item" href="http://semantic-ui.com/modules/nag.html#/usage" target="_blank">Usage</a> --}}
        {{!-- <a class="item" href="http://semantic-ui.com/modules/nag.html#/settings" target="_blank">Settings</a> --}}
      </div>

    </div>

  </div>
</div>

<div class="ui main container">

  {{#ui-example
    header="Simple Example"
    subHeader="Basic Checkbox"
    as |showing setCopyCode|}}

    {{#ui-html showing=showing}}
      {{#ui-nag class="inline cookie"}}
        <span class="title">
          We use cookies to ensure you get the best experience on our website
        </span>
        <i class="close icon"></i>
      {{/ui-nag}}
    {{/ui-html}}

    {{#ui-annotation showing=showing setCopyCode=setCopyCode}}
\{{#ui-nag class="inline cookie"}}
  <span class="title">
    We use cookies to ensure you get the best experience on our website
  </span>
  <i class="close icon"></i>
\{{/ui-nag}}
    {{/ui-annotation}}

  {{/ui-example}}

  <div class="ui button" {{action 'clear'}}>
    Reset
  </div>

</div>
